
import React, { Component } from 'react';
import {
    View, Text, StyleSheet, Animated, PixelRatio, Dimensions,
} from 'react-native';

import { Button, Label,StickList } from 'iftide';
function getUIPt(px) {
    const { width } = Dimensions.get('window');
    return PixelRatio.roundToNearestPixel((px * width) / 750);
}
const screenWidth = Dimensions.get('window').width;
const ITEM_HEIGHT = 44
export default class StickList_Demo extends Component {
    scrollY = new Animated.Value(0)

    constructor(props) {
        super(props);
        this.state = {
            data: null,
            topIndexList: [], // 被指定的index
            pageNum: 0,
            isLoading: false,
        };
    }

    timer1 = null

    // 模拟请求接口的
    getTempList = (from) => {
        const { data, topIndexList, pageNum } = this.state;
        if (this.timer1) {
            clearTimeout(this.timer1);
        }
        this.setState({ isLoading: true });
        this.timer1 = setTimeout(() => {
            if (!data) {
                topIndexList.push(0);
                this.setState({
                    data: [{
                        title: this.renderStick([{
                            name: "基金名称", width: screenWidth / 3
                        }, {
                            name: "万份收益", width: screenWidth / 3
                        },
                        {
                            name: "七日年化", width: screenWidth / 3
                        }]), stickable: true, itemStyle: styles.itemStyle
                    }, ...this.randomDate()],
                    topIndexList,
                    pageNum: pageNum + 1,
                    isLoading: false,
                });
            } else if (data && pageNum < 8) {
                topIndexList.push(data.length);
                data.push({
                    title: this.renderStick([{
                        name: "基金名称", width: screenWidth / 3
                    }, {
                        name: "万份收益", width: screenWidth / 3
                    },
                    {
                        name: "七日年化", width: screenWidth / 3
                    }]), stickable: true
                });
                data.push(...this.randomDate());
                this.setState({
                    data, topIndexList, pageNum: pageNum + 1, isLoading: false,
                });
            } else {
                this.setState({ isLoading: false });
            }
        }, 300);
    }
    click = () => {
        alert("helo")
    }
    renderStick = (stickHead) => {
        let headArea = []
        stickHead.forEach((item, index) => {
            headArea.push(
                <View key={index} style={[styles.item, { height: ITEM_HEIGHT, width: item.width }]}>
                    <Label text={item.name} />
                </View>
            )
        })
        return (
            <View style={styles.stickable}>
                {headArea}
            </View>
        )
    }
    renderItem = ({ item, index }) => {
        const { stickable, title } = item;
        if (stickable) {
            return (
                <View style={[styles.stickableTitle]}>
                    {item.title}
                </View>
            );
        }
        let headArea = []
        title.forEach((item, index) => {
            if (index == 0) {
                headArea.push(
                    <View key={index} style={[styles.item,]}>
                        <Label text={item.name} />
                        <Text>222</Text>
                    </View>
                )
            } else {
                headArea.push(
                    <View key={index} style={[styles.item]}>
                        <Label text={item.name} />
                    </View>
                )
            }
        })
        return (
            <View style={styles.stickable}>
                {headArea}
            </View>
        )
    }
    randomDate() {
        const tempDate = parseInt(Math.random() * 80, 10) + 1;
        const arr = [];
        for (let index = 0; index < tempDate; index++) {
            arr.push({
                title: [{
                    name: "博时月月乐同存单…",
                    width: screenWidth / 3
                },
                {
                    name: "1000",
                    width: screenWidth / 3
                }, {
                    name: "+2.51%",
                    width: screenWidth / 3
                }], stickable: false
            });
        }
        return arr;
    }

    componentDidMount() {
        this.getTempList(0);
    }

    componentWillUnmount() {
        if (this.timer1) {
            clearTimeout(this.timer1);
        }
    }
    onEndReached = () => {
        this.getTempList(1)
    }

    renderFooter = () => {
        const {
            data, topIndexList, pageNum, isLoading,
        } = this.state;
        const listLength = data.length;
        if (listLength <= 3) {
            return (

                <View style={{ height: (5 - listLength) * getUIPt(100) }} />
            );
        }
        if (isLoading && pageNum > 1) {
            return (<Text>加载中…</Text>);
        }
        return null;

    }

    render() {
        const {
            data, topIndexList, pageNum, isLoading,
        } = this.state;
        return (
            <View style={styles.Container}>
                <StickList
                    data={data}
                    onEndReached={this.onEndReached}
                    topIndexList={topIndexList}
                    renderFooter={this.renderFooter}
                    renderItem={this.renderItem}
                    onEndReachedThreshold={0.3}
                    scrollEventThrottle={1}
                    showsVerticalScrollIndicator={false}
                    refreshing={false}
                    pageSize={2}
                />
                <View>
                    {/* { (!!list && list.length > 0&& (
<Animated.FlatList
contentContainerStyle={styles.FlatListContainer}
data={list}
ListFooterComponent={() => this.renderFooter()}
renderItem={this.renderItem}
keyExtractor={(item, index) => `${index}`}
showsVerticalScrollIndicator={false}
stickyHeaderIndices={topIndexList}
scrollEventThrottle={1}
onEndReached={() => { this.onEndReached(); }}
onEndReachedThreshold={0.3}
onScroll={
Animated.event(
[
{
nativeEvent: {
contentOffset: { y: this.scrollY },
},
},
],
{
useNativeDriver: true,

}
)
}
/>
))} */}
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    FlatListContainer: {
        // paddingTop: getUIPt(230),
        // marginTop: getUIPt(80),
        paddingBottom: getUIPt(80),
    },

    Container: {

    },
    stickableTitle: {
        color: '#fff',
        backgroundColor: '#A0BB66',
        lineHeight: getUIPt(80),
    },
    originTitle: {
        height: getUIPt(84),
        backgroundColor: '#A0BBE7',
        color: '#999',
    },
    stickable: {
        flexDirection: 'row',
        justifyContent: 'flex-start',
        minHeight: ITEM_HEIGHT,
        alignItems: 'center'
    },
    item: {
        justifyContent: 'flex-start',
        paddingHorizontal: 15,
        paddingTop: 12,
        paddingBottom: 12
    }
});
